<!DOCTYPE html>
<html style="background-color: #F1F4FB">

<head>
	<meta charset="utf-8">
	<title>书著统计页面</title>
	<!--公用样式-->
	<link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/comment.css"/>
	<link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/supplier/common/css/style.css"/>
	<!--extended-->
	<link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/extended.css"/>
	<!--Layui-->
	<link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css" media="all"/>
	<!--公用样式JS-->
	<script type="text/javascript" src="${re.contextPath}/plugin/jquery/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/comment.js"></script>
	<script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.js" charset="utf-8"></script>
</head>
<style>
	.Right {
		overflow-y: auto;
		width: 100%;
		left: 16%;
		top: 144px;
	}
	.layui-table-cell {
		text-align: center;
		font-size:14px;
		padding:0 5px;
		height:auto;
		overflow:visible;
		text-overflow:inherit;
		white-space:normal;
		word-break: break-all;
	}
	.tab-name-unselect {
		font-weight: bolder;
		font-size: 18px!important;
		color: #888888;
	}
	.tab-name-select{
		font-weight: bolder;
		font-size: 18px!important;
		color: #1e9fff!important;
		background-color: #ffffff!important;
	}
	.layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after {
		border-bottom: 2px solid #1e9fff!important;
	}
	.layui-laypage-limits select {
   		width: 70px;
	}
</style>

<body>
<!--头部-->
<!--容器-->
<div class="layui-container" style="background-color: #ffffff;width:96%;margin-top:60px;padding:16px;border-radius: 10px">
	<!--tab页面-->
	<div class="layui-tab layui-tab-brief" lay-filter="demo">
		<ul id="tab-uls" class="layui-tab-title" style="margin: 0px 10px 10px 10px">
			<li class="layui-this tab-name-select">按人统计</li>
			<li class="tab-name-unselect">按书籍名称关键统计</li>
		</ul>
		<div class="layui-tab-content" style="height: 60px;">
			<div class="layui-tab-item layui-show" style="margin-left: 0px">
				<!--筛选行-->
				<div style="background-color: #F1F4FB;border-radius: 5px;padding:14px 10px;">
					<div class="layui-row">
						<!--姓名-->
						<div class="layui-col-md2" style="padding-left:1%">
							<span>姓名:</span>
							<input id="name" class="layui-input layui-input-inline" type="text" placeholder="姓名" style="width: 50%">
						</div>
						<!--时间-->
						<div class="layui-col-md4" style="padding-left:2%">
							<span>版次时间:</span>
							<input id="bc_date_start0" class="layui-input layui-input-inline" type="text" style="width: 32%;" placeholder="开始时间">
							<span>至</span>
							<input id="bc_date_end0" class="layui-input layui-input-inline" type="text"  style="width: 32%;" placeholder="结束时间">
						</div>
						<div class="layui-col-md1 layui-col-md-offset4" style="padding-right:10px">
							<#--				<input class="layui-btn layui-btn-danger layui-btn-sm fr ml10" type="button" value="重置" onclick="resetQuery()">-->
							<input class="layui-btn layui-btn-normal fr" type="button"  value="筛选" onclick="query()">
						</div>
					</div>
				</div>
			</div>
			<div class="layui-tab-item" style="margin-left: 0px">
				<!--筛选行-->
				<div style="background-color: #F1F4FB;border-radius: 5px;padding:14px 10px;">
					<div class="layui-row">
						<!--权利要求书名称-->
						<div class="layui-col-md2" style="padding-left:1%">
							<span>书籍名称:</span>
							<input id="qlyqs_name" class="layui-input layui-input-inline" type="text" placeholder="书籍名称" style="width: 50%">
						</div>
						<!--时间-->
						<div class="layui-col-md4" style="padding-left:2%">
							<span>时间:</span>
							<input id="bc_date_start1" class="layui-input layui-input-inline" type="text" style="width: 32%;" placeholder="开始时间">
							<span>至</span>
							<input id="bc_date_end1" class="layui-input layui-input-inline" type="text"  style="width: 32%;" placeholder="结束时间">
						</div>
						<div class="layui-col-md1 layui-col-md-offset4" style="padding-right:10px">
							<#--				<input class="layui-btn layui-btn-danger layui-btn-sm fr ml10" type="button" value="重置" onclick="resetQuery()">-->
							<input class="layui-btn layui-btn-normal fr" type="button"  value="筛选" onclick="query()">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="layui-container" style="background-color: #ffffff;width:96%;margin-top:30px;padding:16px;border-radius: 10px">
	<div class="layui-row">
		<div class="layui-col-md3 layui-col-md-offset9">
			<input class="layui-btn layui-btn-normal layui-btn-sm fr ml10" type="button" value="导出Excel" onclick="exportTable()">
			<input class="layui-btn layui-btn-danger layui-btn-sm fr" type="button" value="预览Excel" onclick="viewTable()">
		</div>
	</div>
	<div class="layui-row">
		<table id="statisticstable" lay-filter="statisticstable">

		</table>
	</div>
</div>


<div style="height: 50px"></div>
<#--	<!--右侧内容&ndash;&gt;-->
<script type="text/javascript" src="${re.contextPath}/plugin/tools/tool.js"></script>
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/tabs.js"></script>
<script type="text/javascript" src="${re.contextPath}/pageoffice.js" id="po_js_main"></script>
<script type="text/html" id="index">
		{{d.LAY_INDEX}}
</script>
<#--<script type="text/html" id="xmjb">-->
<#--	{{# if(d.flag){ }}-->
<#--	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="update"><i class="layui-icon">&#xe640;</i>编辑</a>-->
<#--	{{# }else{ }}-->
<#--	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="handle"><i class="layui-icon">&#xe640;</i>办理</a>-->
<#--	{{# } }}-->
<#--</script>-->
<script type="text/javascript">
	var table,tableIns,laydate,form,layer,element;
	var defaultTabInd = 0;
	layui.use(['laydate','table','form','layer','element'], function () {
		laydate = layui.laydate;
		table = layui.table;
		form = layui.form;
		layer = layui.layer;
		element = layui.element;//Tab的切换功能，切换事件监听等，需要依赖element模块
		//执行一个laydate实例
		laydate.render({
			elem: '#bc_date_start0' //见刊日期开始
		});
		laydate.render({
			elem: '#bc_date_end0' //见刊日期结束
		});
		laydate.render({
			elem: '#bc_date_start1' //见刊日期开始
		});
		laydate.render({
			elem: '#bc_date_end1' //见刊日期结束
		});


		//一些事件触发
		element.on('tab(demo)', function(data){
			console.log(data);
			if(defaultTabInd == data.index){
				console.log("没事瞎点");
			}else{
				defaultTabInd = data.index;
				$('#tab-uls li').addClass("tab-name-unselect");
				$('#tab-uls li').removeClass("tab-name-select");
				$('#tab-uls li:eq('+data.index+')').removeClass("tab-name-unselect");
				$('#tab-uls li:eq('+data.index+')').addClass("tab-name-select");
				getTableByIndex(data.index);
				if(data.index == '2'){
					//按时间统计,不需要筛选行:
					$('.layui-tab-content').attr('hidden','hidden');
				}else{
					$('.layui-tab-content').removeAttr('hidden');
				}
			}
		});

		getTable1();

	});

	function getTableByIndex(index){
		//根据条件加载表格:
		if(index == 0){
			//按照人统计
			getTable1();
		}else if(index == 1){
			//按权利要求书统计
			getTable2();
		}else if(index == 2){
			//按按论文名称统计
			getTable3();
		}
	}

	function getSearchData(){
		var start = $('#bc_date_start'+defaultTabInd).val();
		var end = $('#bc_date_end'+defaultTabInd).val();
		var jsondata = {};
		jsondata['obj1'] = start;
		jsondata['obj2'] = end;
		if(defaultTabInd == 0){
			jsondata['obj3'] = $('#name').val();
		}else{
			jsondata['spfF1'] = $('#qlyqs_name').val();
		}
		return jsondata;
	}

	//根据    计划类型    获取表格数据:
	//表头不定列
	function getTable1(){
		var jsondata = getSearchData();
					//方法级渲染  初始为计划类别统计
					tableIns = table.render({
						id: 'statisticstable',
						elem: '#statisticstable',
						url: '/search/decision/form/statistics/110006?index=0',
						height: "full",
						page: true,
						where: jsondata,
						cols: [[
							{field:'',title: '序号',templet: '#index', width: '10%'},
							{field:'name',title: '姓名', width: '18%'},
							{field: 'totalCount',title: '总篇数',width: '18%',event: 'showCountDetail',style: 'color: dodgerblue;cursor: pointer'},
							{field: 'zhuBianCount',title: '主编数',width: '18%'},
							{field: 'fuZhuBianCount',title: '副主编数',width: '18%'},
							{field: 'bianWeiCount',title: '编委数',width: '18%'}
						]],
						done: function (res, currentCount) {

						}
					});
					//工具条事件
					table.on('tool(statisticstable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
						var data = obj.data; //获得当前行数据
						var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
						var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
						var jsondata = getSearchData();
						console.log(obj);
						console.log(data);
						console.log(layEvent);
						console.log(tr);
						jsondata['obj3'] = data.name;
						if(layEvent.indexOf('showCountDetail')!= -1){ //查看
							var count = data['totalCount'];
							if(!count || count == 0){
								return ;
							}
							var searchDataJson = JSON.stringify(jsondata);
							localStorage.setItem("count-detail-filter-sz",searchDataJson);
							var w = ($(window).width()*0.8);
							var h = ($(window).height()*0.8);
							layer.open({
								type: 2,
								title: false,
								closeBtn: 1,
								shade: 0.8,
								area: [w+'px',h+'px'],
								content: '/search/decision/form/statistics/showCountDetailPage/110006?index='+defaultTabInd,
								success: function(layero, index){

								},
								end: function () {
									localStorage.removeItem("count-detail-filter-sz");
								}
							})
						}
					});

	}

	//根据    项目级别    获取表格数据:
	//表头不定列
	function getTable2(){
		var jsondata = getSearchData();
		console.log('jsondata');
		console.log(jsondata);
		//方法级渲染  初始为计划类别统计
		tableIns = table.render({
			id: 'statisticstable',
			elem: '#statisticstable',
			url: '/search/decision/form/statistics/110006?index=1',
			height: "full",
			page: true,
			where: jsondata,
			cols: [[
				{field: '',title: '序号',templet: '#index',width: '20%'},
				{field: 'totalCount',title: '书著总篇数',width: '40%'},
				{field: 'year',title: '年份',width: '40%'}
			]],
			done: function (res, currentCount) {

			}
		});

	}

	//根据    项目负责人    获取表格数据:
	function getTable3(){
		var jsondata = getSearchData();
		console.log('jsondata');
		console.log(jsondata);
		$.ajax({
			url: '/search/decision/form/statistics/tableHead/110006?index=2',
			data: jsondata,
			type: 'get',
			dataType: 'json',
			success: function(res){
				console.log(res);
				if(res.flag && res.data){
					//设置表格:
					//方法级渲染  初始为计划类别统计
					tableIns = table.render({
						id: 'statisticstable',
						elem: '#statisticstable',
						url: '/search/decision/form/statistics/110006?index=2',
						height: "full",
						page: true,
						where: jsondata,
						cols: [res.data],
						done: function (res, currentCount) {

						}
					});

				}
			}
		})
	}

	function merge(res, curr, count) {
		var data = res.data;
		var mergeIndex = 0;//定位需要添加合并属性的行数
		var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
		var columsName = ['name'];//需要合并的列名称
		var columsIndex = [2];//需要合并的列索引值

		for (var k = 0; k < columsName.length; k++) {//这里循环所有要合并的列
			var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
			for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
				var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
				var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列
				if (data[i][columsName[k]] === data[i - 1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并
					console.log(data[i][columsName[k]]);
					console.log(data[i - 1][columsName[k]]);
					mark += 1;
					tdPreArr.each(function () {//相同列的第一列增加rowspan属性
						var prev = $(this).prev();
						var next = $(this).next();
						$(this).prev().prev().attr("rowspan", mark);
						$(this).next().attr("rowspan", mark);
						$(this).attr("rowspan", mark);
					});
					tdCurArr.each(function () {//当前行隐藏
						$(this).prev().prev().css("display", "none");
						$(this).next().css("display", "none");
						$(this).css("display", "none");
					});
				}else {
					mergeIndex = i;
					mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
				}
			}
		}
	}

	//根据    人员统计    获取表格数据:


	function query() {
		getTableByIndex(defaultTabInd);
	}

	function resetQuery(){
		$('#play_type_select').val('000');
		$('#hp_date_start').val('');
		$('#hp_date_end').val('');
		$('#project_name').val('');
		$('#project_level_select').val('000');
		$('#project_fzr').val('');
		$('#project_allow_unit').val('');
		query();
	}

	function viewTable(){
		var jsondata = getSearchData();
		$.ajax({
			url: '/search/decision/form/statistics/viewTable/110006?index='+defaultTabInd,
			data: jsondata,
			type: 'get',
			dataType: 'json',
			success: function(res){
				if(res.flag){
					if(res.data){
						var w = ($(window).width()*0.8);
						var h = ($(window).height()*0.8);
						POBrowser.openWindowModeless('/sys/office/openwordTemp?ft=1&fid=' + res.data, 'width=1200px;height=800px;', '{}')
					}
				}
			}
		})
	}

	function exportTable(){
		var para = "";
		//姓名
		var author = $('#name').val();
		//见刊日期
		var jkrqStart = $('#jk_date_start'+defaultTabInd).val();
		var jkrqEnd = $('#jk_date_end'+defaultTabInd).val();
		//项目名称
		var projectName = $('#project_name').val();
		//论文名称
		var lwmc = $('#lw_name').val();

		if(lwmc){
			para = para+'&spfF1='+lwmc;
		}
		if(author){
			para = para+'&spfF2='+author;
		}
		if(projectName){
			para = para+'&spfF5='+projectName;
		}
		if(jkrqStart){
			para = para+'&spfF8='+jkrqStart;
		}
		if(jkrqEnd){
			para = para+'&spfF9='+jkrqEnd;
		}
		//获取全部数据:
		var url= '/search/decision/form/export/statistics/110006?index='+defaultTabInd+para;
		location.href = url;
	}

</script>
</body>

</html>